<template>
  <el-dialog
    title="添加/修改服务器"
    :visible.sync="open"
    @close="close"
  >
    <el-form ref="form" :model="row" :rules="rules" label-width="120px">

      <el-form-item label="服务器名称" prop="serverName">
        <el-input v-model="row.serverName" placeholder="请选择服务器名称" />
      </el-form-item>
      <el-form-item label="服务器ip" prop="ip">
        <el-input v-model="row.ip" placeholder="请输入服务器ip" @change="f = false" />
      </el-form-item>
      <el-form-item label="系统名称" prop="systemId">
        <el-select v-model="row.systemId" placeholder="系统名称" clearable filterable>
          <el-option
            v-for="(item, index) in systemIdList"
            :key="index"
            :label="item.systemCode + ' / ' + item.systemName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="cron表达式" prop="cron">
        <el-input
          v-model.trim="row.cron"
          style="width: 80%;"
          readonly
          placeholder="请输入cron表达式"
          maxlength="30"
          show-word-limit
          class="limit"
        />
        <el-button style="width: 20%;" @click="addCron">生成表达式</el-button>
      </el-form-item>
      <el-form-item label="预警通知人" prop="alarmUsers">
        <el-select
          v-model="row.alarmUsers"
          multiple
          collapse-tags
          placeholder="请选择"
          collapse-tag
          filterable
          clearable
        >
          <el-option v-for="(item) in receiveUserList" :key="item.id" :value="item.id" :label="item.realName" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="row.taskStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开启"
          active-value="1"
          inactive-text="停止"
          inactive-value="2"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="row.remarks" :maxlength="200" type="textarea" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="connect">测试连接</el-button>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
    <dt-Vcrontab ref="vcrontabRef" v-model.trim="row.cron" />
  </el-dialog>
</template>

<script>
import { serviceWatchAdd, serviceWatchEdit, serviceWatchTestConnect } from '@/api/serviceWatch'
import { getSystemListApi } from '@/api/serviceManage/requestPartyServiceManage'
import { listMonitorAlarmUser } from '@/api/contactAlarm'
import { addRes } from '@/utils/editAlarmUser'

export default {
  name: 'AddEditService',
  dicts: ['manage_type', 'monitorStatus'],
  data() {
    return {
      receiveUserList: [],
      f: false,
      systemIdList: [],
      open: false,
      row: {
        serverName: null,
        ip: null,
        systemId: null,
        manageType: null,
        cron: null,
        otherParams: null,
        remarks: null,
        taskStatus: '1'
      },
      // 表单校验
      rules: {
        serverName: { required: true, message: '请输入服务器名称', trigger: 'blur' },
        ip: { required: true, message: '请输入服务器ip', trigger: 'blur' },
        systemId: { required: true, message: '请选择系统', trigger: 'change' },
        manageType: { required: true, message: '请选择接口类型', trigger: 'blur' },
        cron: { required: true, message: '请设置cron表达式', trigger: 'change' },
        alarmUsers: { required: true, message: '请选择预警通知人', trigger: 'change' }
      }
    }
  },
  created() {
    this.infoData()
    listMonitorAlarmUser({ pageNo: 1, pageSize: -1 }).then(res => {
      this.receiveUserList = res.data.rows
    })
  },
  methods: {
    dataF() {
      return {
        serverName: this.row.serverName,
        ip: this.row.ip,
        systemId: this.row.systemId,
        cron: this.row.cron,
        alarmUsers: addRes(this.row.alarmUsers),
        remarks: this.row.remarks,
        id: this.row.id,
        taskStatus: this.row.taskStatus
      }
    },
    infoData() {
      getSystemListApi()
        .then(({ code, data }) => {
          if (code === '00000') {
            this.systemIdList = data
          }
        })
    },
    connect() {
      this.$refs.form.validate(f => {
        if (f) {
          serviceWatchTestConnect(this.dataF()).then(res => {
            if (res.code === '00000') {
              this.f = true
              this.$message.success('连接成功')
            }
          })
        }
      })
    },
    close() {
      // this.row = {}
      this.open = false
      this.$refs['form'].resetFields()
    },
    submitForm() {
      this.$refs.form.validate(f => {
        if (f) {
          const data = this.dataF()
          if (!this.row.id) {
            serviceWatchAdd(data).then(res => {
              this.$message.success('新增成功')
              this.$emit('getList')
              this.close()
              this.f = false
            })
          } else {
            serviceWatchEdit(data).then(res => {
              this.$message.success('修改成功')
              this.$emit('getList')
              this.close()
              this.f = false
            })
          }
        }
      })
    },
    addCron() {
      this.$refs.vcrontabRef.showDialog()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
